<template>
  <demoBlock title="监听切换事件" class="tabbar-demo">
    <vcu-tabbar v-model="active" @change="onChange" active-color="#ee0a24" inactive-color="#000">
      <vcu-tabbar-item icon="home">首页</vcu-tabbar-item>
      <vcu-tabbar-item icon="search">搜索</vcu-tabbar-item>
      <vcu-tabbar-item icon="cart">购物车</vcu-tabbar-item>
      <vcu-tabbar-item icon="settings">设置</vcu-tabbar-item>
    </vcu-tabbar>
  </demoBlock>
</template>


<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const active = ref(0);
    const onChange = (index) => console.info(`标签 ${index}`);
    return { active,onChange };
  },
});
</script>

<style lang="less">
.tabbar-demo {
  .vcu-tabbar {
    position: relative;
    padding-bottom: 0;
  }
}
</style>